<template>
  <div>
    <el-dialog
        title="订单详情"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left" label-width="100px" class="demo-ruleForm">
        <!--店名，自动生成，不可更改-->
        <el-form-item label="店名">
          <el-input :disabled="true" v-model="restaurant.restaurantName" value=""></el-input>
        </el-form-item>

        <!--收货地址选择-->
        <el-form-item style="text-align: left" label="收货地址">
          <el-select size="large" v-model="defaultAddress.id">

            <el-option v-for="address in addressData"
                       :label="address.address"
                       :key="address.address"
                       :value="address.id"></el-option>
          </el-select>
        </el-form-item>

        <!--订单备注-->
        <el-form-item label="订单备注">
          <el-input type="textarea" v-model="order.note"></el-input>
        </el-form-item>
        <div v-for="food in foodList" v-if="food.count>0" class="order-food">
          <el-row>
            <el-col :span="20">
              <span>{{ food.title }}:{{ food.count }} 份</span>
            </el-col>
            <el-col :span="4">
              <!--价格:单价乘数量-->
              <span class="price">{{ food.price * food.count }}元</span><br/>
            </el-col>
          </el-row>
        </div>
        <div class="order-food">
          <el-row>
            <el-col :span="20">打包费:</el-col>
            <el-col :span="4">
              <span class="price">  {{ restaurant.boxCost }}元</span>
            </el-col>
          </el-row>
        </div>
        <el-form-item>
          <span class="price total">总价: {{ totalPrice }}元</span>
          <el-button type="primary" @click="submitForm">立即创建</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>


      </el-form>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OrderFormDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }, //表单可见性
    restaurant: Object,     //商家对象
    foodList: Array,        //订单列表
    //食品编号,查询评论
  },
  data() {
    return {
      orderId: Number,
      addressData: [],
      defaultAddress: {
        id: null,
        address: "",
        name: ""
      },
      order: {
        address: null,        //收货地址
        note: "",           //订单备注
        status: Number,         //订单状态
      }
    };
  },
  // 收货地址列表
  created() {
    this.getAddressList();
  },
  computed: {
    //  返回购物清单总价格
    totalPrice: function () {
      let total_price = 0;
      //遍历foodList
      if (this.foodList.length > 0) {
        for (var i = 0; i < this.foodList.length; i++) {
          total_price = total_price + (this.foodList[i].price * this.foodList[i].count);
        }
      }
      total_price += this.restaurant.boxCost;
      return total_price;
    },
  },
  methods: {
    getAddressList() {
      this.$axios.get("/user/address", {
        params: {
          id: this.$store.state.user.id
        }
      })
          .then(response => {
            if (response.data.success) {
              this.addressData = response.data.address_list;
              // 找到默认地址
              this.addressData.forEach((temp, index) => {
                if (temp.isDefault) {
                  this.defaultAddress.id = temp.id;
                  this.defaultAddress.address = temp.address;
                  this.defaultAddress.name = temp.name;
                }
              });
            }
          })
          .catch(error => {
            console.log(error);
          });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.$emit("close-order");
            // done();
          })
          .catch(_ => {
          });
    },
    //提交订单信息给后台
    submitForm() {
      const h = this.$createElement;

      if (this.$store.state.user.wallet < this.totalPrice) {
        this.$notify({
          title: '订单',
          type: 'error',
          message: '余额不足,请前往个人信息页面充值...'
        });
      } else {
        this.$axios({
          method: "post",
          url: "/order/neworder",
          data: {
            uid: this.$store.getters.uid,
            rid: this.restaurant.id,
            addressId: this.defaultAddress.id,
            foodList: this.foodList,
            remark: this.order.note,
            boxCost: this.restaurant.boxCost,
            total: this.totalPrice,
          }
        })
            .then(response => {
              this.$notify({
                title: '订单',
                message: h('i', {style: 'color: teal'}, response.data.message)
              });
              this.$emit("close-order");
              this.$emit("reset-cart");
              this.$store.commit('setUser', response.data.user);
            })
            .catch(error => console.log(error))
      }
    },
    resetForm() {
      console.log('reset');
      this.order = {};
      this.$emit("close-order");
    }
  }
}
</script>

<style scoped>
.price {
  color: #E6A23C;
  font-family: "Hiragino Sans GB";
}

.total {
  float: left;
  font-size: 20px;
}

.order-food {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  text-align: left;
}
</style>
